<template>
  <div class="home">
    <!--  头部导航栏 -->
    <header class="home-header wrap" :class="{ active: state.headerScroll }">
      <router-link tag="i" to="./category"> <i class="nbicon nbmenu2"></i></router-link>
      <div class="header-search">
        <span class="app-name">新蜂商城</span>
        <i class="iconfont icon-search"></i>
        <router-link class="search-title" to="./product-list" tag="span">山河无恙,人间皆安</router-link>
      </div>
      <router-link class="login" tag="span" to="./login" v-if="!state.isLogin">登录</router-link>
      <router-link class="login" to="./user" tag="span" v-else>
        <van-icon name="manager-o" />
      </router-link>
    </header>
    <!-- 轮播图组件 -->
    <swiper :list="state.swiperList"></swiper>
    <!-- 分类栏目 -->
    <div class="category-list">
      <div v-for="(item, index) in state.categoryList" :key="item.categoryId" @click="tips">
        <img :src="item.imgUrl" alt="" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <!-- 商品栏目 -->
    <div class="good">
      <header class="good-header">新品上线</header>
      <div class="good-box">
        <div class="good-item" v-for="item in state.newGoodses" :key="item.goodsId" @click="goToDetail(item)">
          <img :src="item.goodsCoverImg" alt="" />
          <div class="good-desc">
            <div class="titile">{{ item.goodsName }}</div>
            <div class="price">￥{{ item.sellingPrice }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="good">
      <header class="good-header">热门商品</header>
      <div class="good-box">
        <div class="good-item" v-for="item in state.hotGoodses" :key="item.goodsId" @click="goToDetail(item)">
          <img :src="item.goodsCoverImg" alt="" />
          <div class="good-desc">
            <div class="titile">{{ item.goodsName }}</div>
            <div class="price">￥{{ item.sellingPrice }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="good">
      <header class="good-header">最新推荐</header>
      <div class="good-box">
        <div class="good-item" v-for="item in state.recommendGoodses" :key="item.goodsId" @click="goToDetail(item)">
          <img :src="$filters.prefix(item.goodsCoverImg)" alt="" />
          <div class="good-desc">
            <div class="titile">{{ item.goodsName }}</div>
            <div class="price">￥{{ item.sellingPrice }}</div>
          </div>
        </div>
      </div>
    </div>
    <navBar></navBar>
  </div>
</template>
<script lang="ts" setup>
import navBar from "@/components/NavBar.vue";
import Swiper from "@/components/Swiper.vue";
import { reactive, onMounted, nextTick } from "vue";
import { getLocal } from "@/common/js/utils";
import { getHome } from "@/service/home.js";
import { showLoadingToast, closeToast, showToast } from "vant";
import { useRouter } from "vue-router";
const router = useRouter();
const state = reactive({
  isLogin: false, //是否已登录
  swiperList: [], //轮播图数据
  categoryList: [
    {
      name: "新蜂超市",
      imgUrl: "//s.weituibao.com/1583585285461/cs.png",
      categoryId: 100001,
    },
    {
      name: "新蜂服饰",
      imgUrl: "//s.weituibao.com/1583585285468/fs.png",
      categoryId: 100003,
    },
    {
      name: "全球购",
      imgUrl: "//s.weituibao.com/1583585285470/qq.png",
      categoryId: 100002,
    },
    {
      name: "新蜂生鲜",
      imgUrl: "//s.weituibao.com/1583585285472/sx.png",
      categoryId: 100004,
    },
    {
      name: "新蜂到家",
      imgUrl: "//s.weituibao.com/1583585285467/dj.png",
      categoryId: 100005,
    },
    {
      name: "充值缴费",
      imgUrl: "//s.weituibao.com/1583585285465/cz.png",
      categoryId: 100006,
    },
    {
      name: "9.9元拼",
      imgUrl: "//s.weituibao.com/1583585285469/pt.png",
      categoryId: 100007,
    },
    {
      name: "领劵",
      imgUrl: "//s.weituibao.com/1583585285468/juan.png",
      categoryId: 100008,
    },
    {
      name: "省钱",
      imgUrl: "//s.weituibao.com/1583585285471/sq.png",
      categoryId: 100009,
    },
    {
      name: "全部",
      imgUrl: "//s.weituibao.com/1583585285470/qb.png",
      categoryId: 100010,
    },
  ],
  newGoodses: [], //新品上线数据
  hotGoodses: [], //热门商品数据
  recommendGoodses: [], //推荐商品数据
  headerScroll: false, //头部导航栏是否滚动状态
});
onMounted(async () => {
  // 判断是否登录了
  if (getLocal("token")) {
    state.isLogin = true;
  } else {
    state.isLogin = false;
  }
  // 获取数据之前提示 加载首页数据提示框
  showLoadingToast({
    message: "加载中...",
    forbidClick: true, //禁止点击
  });
  // 获取首页数据
  const { data } = await getHome();
  state.swiperList = data.carousels;
  state.newGoodses = data.newGoodses;
  state.hotGoodses = data.hotGoodses;
  state.recommendGoodses = data.recommendGoodses;
  // 关闭加载提示
  closeToast();
});
const tips = () => {
  showToast("暂无此功能");
};
// 监听滚动事件，改变头部导航栏样式
nextTick(() => {
  document.body.addEventListener("scroll", () => {
    /*
    *计算当前的滚动位置 scrollTop 
    window.pageYOffset、document.documentElement.scrollTop或
    document.body.scrollTop三个属性分别代表了不同浏览器下页面滚动的垂直偏移量。
    */
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    //如何scrollTop大于100，则说明滚动距离超过头部高度，则改变样式
    scrollTop > 100 ? (state.headerScroll = true) : (state.headerScroll = false);
  });
});

const goToDetail = (item) => {
  router.push({ path: "/product", query: { id: item.goodsId } });
};
</script>
<style lang="less" scoped>
@import "../common/style/mixin.less";
.home {
  .home-header {
    position: fixed;
    left: 0;
    top: 0;
    .wh(100%, 50px);
    .fj(); //flex布局
    line-height: 50px;
    padding: 0 15px;
    .boxSizing();
    font-size: 15px;
    color: #fff;
    z-index: 10000;
    .nbmenu2 {
      color: @primary;
    }
    &.active {
      background: @primary;
      .nbmenu2 {
        color: #fff;
      }
      .login {
        color: #fff;
      }
    }
    .header-search {
      display: flex;
      width: 74%;
      line-height: 20px;
      margin: 10px 0;
      padding: 5px 0;
      color: #232326;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 20px;
      .app-name {
        padding: 0 10px;
        color: @primary;
        font-size: 20px;
        font-weight: bold;
        border-right: 1px solid #666;
      }
      .icon-search {
        padding: 0 10px;
        font-size: 17px;
      }
      .search-title {
        font-size: 12px;
        color: #666;
        line-height: 21px;
      }
    }
    .login {
      color: @primary;
      line-height: 52px;
      .van-icon-manager-o {
        font-size: 20px;
        vertical-align: -3px; //垂直居中调整
      }
    }
  }
  .category-list {
    display: flex;
    flex-shrink: 0; //0-缩放时子元素不缩小  1默认值-子元素等比例缩小
    flex-wrap: wrap; //换行
    width: 100%;
    padding-bottom: 13px;
    div {
      display: flex;
      flex-direction: column;
      width: 20%;
      text-align: center;
    }
    img {
      .wh(36px,36px);
      margin: 10px auto 8px auto;
    }
  }
  .good {
    .good-header {
      .wh(100%, 48px);
      display: flex;
      justify-content: center;
      line-height: 48px;
      font-size: 16px;
      color: @primary;
      background: #f9f9f9;
      font-weight: 700;
    }
    .good-box {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .good-item {
        box-sizing: border-box;
        width: 50%;
        border-bottom: 1px solid #e9e9e9;
        padding: 10px 0;
        img {
          display: block;
          width: 120px;
          margin: 0px auto;
        }
        .good-desc {
          text-align: center;
          font-size: 14px;
          padding: 10px 0;
          .titile {
            color: #222333;
          }
          .price {
            color: @primary;
          }
        }
        &:nth-child(2n + 1) {
          border-right: 1px solid #e9e9e9;
        }
      }
    }
  }
}
</style>
